<!DOCTYPE HTML SYSTEM>
<html>

<head>
<title>FNET Graph Demo</title>
    <style type="text/css">
    <!--
    @import"fnet.css";
    -->
    </style>
	<style type="text/css">
		#graph {
			width: 380px; height: 340px; position: relative; background: #E0E6E6;
			line-height: 23px; border: 1px solid #C3CFD1; margin-right:10px;
			margin-left:10px;
		}
		#graph ul {
			margin: 0; padding: 0; list-style: none;
		}
		#graph ul li {
			position: absolute; width: 28px; bottom: 15px; padding: 0;
			margin: 0; text-align: center; font-weight: bold;
			color: white; line-height: 2.5em;
		}
		#graph li#q1 {left: 24px; background-position: 0px bottom; background:#00608B;}
		#graph li#q2 {left: 101px; background-position: -28px bottom; background:#73BFD7;}
		#graph li#q3 {left: 176px; background-position: -56px bottom; background:#998875;}
		#graph li#q4 {left: 251px; background-position: -84px bottom; background:#C3CC51;}
		#graph li#q5 {left: 327px; background-position: -112px bottom; background:#4D4D4D;}
	</style>
	<script type="text/javascript">
		var fnetDataReceived = 0;
		function fnetXMLHttpRequest(){
			var xmlHTTP = false;
			if (window.ActiveXObject)
				xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
			else if (window.XMLHttpRequest)
				xmlHTTP = new XMLHttpRequest();
			if (!xmlHTTP)
				alert("Cannot create an XMLHTTP instance!");
			return xmlHTTP;
		}
		function fnetRequest(){
			if (!fnetDataReceived){
		        var xmlHTTP = fnetXMLHttpRequest();
 				fnetDataReceived = 1;
				if( xmlHTTP != null){
					xmlHTTP.onreadystatechange = function(){
				  		if (xmlHTTP.readyState == 4){
							if (xmlHTTP.status == 200)
									fnetHandler(xmlHTTP.responseText);
				  			fnetDataReceived = 0;
			  			}
					};
					xmlHTTP.open("GET", "graph.cgi", true);
					xmlHTTP.setRequestHeader("If-Modified-Since", document.lastModified);
					xmlHTTP.send(null);
				}
			}
		}
		function fnetHandler(data){
			var res = eval(data);
			document.getElementById("q1").style.height = res.q1+"px";
			document.getElementById("q1").innerHTML = res.q1;
			document.getElementById("q2").style.height = res.q2+"px";
			document.getElementById("q2").innerHTML = res.q2;
			document.getElementById("q3").style.height = res.q3+"px";
			document.getElementById("q3").innerHTML = res.q3;
			document.getElementById("q4").style.height = res.q4+"px";
			document.getElementById("q4").innerHTML = res.q4;
			document.getElementById("q5").style.height = res.q5+"px";
			document.getElementById("q5").innerHTML = res.q5;								
		}
		window.setInterval("fnetRequest()", 1000);
	</script>
</head>
<body>

	<h2>FNET Graph/AJAX Demo</h2>
 	<div id="graph">
		<ul>
			<li id="q1"></li>
			<li id="q2"></li>
			<li id="q3"></li>
			<li id="q4"></li>
			<li id="q5"></li>
		</ul>
	</div>
	<br/>
	<br/>
	<i>NOTE: This page gets the data from the server periodically with help 
	of AJAX. <br/> It is used JavaScript, CGI and JSON data format.</i>	
</body>
</html>		
